{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

<section class="c-ctd-toggles" aria-hidden="true">
  <div class="mzp-l-content mzp-l-content mzp-t-content-xl">
    <div class="toggle-grid small">
        {% for element in range(4) %}
          <label class="toggle" for="toggle-top-s{{ loop.index }}">
            <input type="checkbox" name="toggle" id="toggle-top-s{{ loop.index }}" class="toggle-input" tabindex="-1" />
            <span class="toggle-display"></span>
          </label>
        {% endfor %}
        <label class="toggle middle" for="toggle-middle-s">
          <input type="checkbox" name="toggle" id="toggle-middle-s" class="toggle-input" />
          <span class="toggle-display"></span>
        </label>
        {% for element in range(4) %}
          <label class="toggle" for="toggle-bottom-s{{ loop.index }}">
            <input type="checkbox" name="toggle" id="toggle-bottom-s{{ loop.index }}" class="toggle-input" tabindex="-1" />
            <span class="toggle-display"></span>
          </label>
        {% endfor %}
    </div>
    <div class="toggle-grid medium">
      {% for element in range(7) %}
      <label class="toggle" for="toggle-top-m{{ loop.index }}">
        <input type="checkbox" name="toggle" id="toggle-top-m{{ loop.index }}" class="toggle-input" tabindex="-1" />
        <span class="toggle-display"></span>
      </label>
      {% endfor %}
      <label class="toggle middle" for="toggle-middle-m">
        <input type="checkbox" name="toggle" id="toggle-middle-m" class="toggle-input" tabindex="-1" />
        <span class="toggle-display"></span>
      </label>
      {% for element in range(7) %}
      <label class="toggle" for="toggle-bottom-m{{ loop.index }}">
        <input type="checkbox" name="toggle" id="toggle-bottom-m{{ loop.index }}" class="toggle-input" tabindex="-1" />
        <span class="toggle-display"></span>
      </label>
      {% endfor %}
    </div>
    <div class="toggle-grid large">
      {% for element in range(10) %}
      <label class="toggle" for="toggle-top-l{{ loop.index }}">
        <input type="checkbox" name="toggle" id="toggle-top-l{{ loop.index }}" class="toggle-input" tabindex="-1" />
        <span class="toggle-display"></span>
      </label>
      {% endfor %}
      <label class="toggle middle" for="toggle-middle-l">
        <input type="checkbox" name="toggle-middle" id="toggle-middle-l" class="toggle-input" tabindex="-1" />
        <span class="toggle-display"></span>
      </label>
      {% for element in range(10) %}
      <label class="toggle" for="toggle-bottom-l{{ loop.index }}">
        <input type="checkbox" name="toggle" id="toggle-bottom-l{{ loop.index }}" class="toggle-input" tabindex="-1" />
        <span class="toggle-display"></span>
      </label>
      {% endfor %}
    </div>
  </div>
</section>
